revision:
code:
<div class="gallery">
<div><img src="../images/1.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/2.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/3.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/4.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/5.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/1a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/2a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/3a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/4a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/5a.jpg" alt=holiday" width="100%" height="100%"/></div>
</div>
<style>
.gallery {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); justify-content:center;}
.gallery img {display: block; max-width: 100%;}
.image-number {position: relative; top: -2VW; left: 1VW; background: white; padding: 0.5vw; font-weight: bold;}
</style>
<script>
const images = document.querySelectorAll('.gallery div img');
images.forEach((img, index) => {
const label = document.createElement('div');
label.textContent = index + 1; // Starts numbering from 1
label.className = 'image-number';
img.parentNode.insertBefore(label, img.nextSibling);
});
</script>
code:
<div class="gallery1">
<figure><img src="../images/5a.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/6.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/7.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/8.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/9.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/6a.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/7a.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/8a.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/9a.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/10.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/10a.jpg" alt=holiday" width="100%" height="100%"/></figure>
<figure><img src="../images/11.jpg" alt=holiday" width="100%" height="100%"/></figure>
</div>
<style>
/* Initialize the counter on the parent */
.gallery1 {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); justify-content:center; gap: .1vw; counter-reset: image-number; /* Creates a counter named "image-number" */}
/* Increment and display the counter on each figure */
.gallery1 figure { counter-increment: image-number; /* Increases the counter by 1 (default) */ position: relative;
display: inline-block; margin: 1vw;}
/* Display the number using ::before or ::after */
.gallery1 figure::before { content: counter(image-number); /* Shows current counter value */ position: absolute;
top: 5px; right: 5px; background: white; padding: 2px 6px; font-weight: bold; border-radius: 3px;}
</style>
code:
<div class="gallery1_A">
<div><img src="../images/5a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/6.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/7.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/8.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/9.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/6a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/7a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/8a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/9a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/10.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/10a.jpg" alt=holiday" width="100%" height="100%"/></div>
<div><img src="../images/11.jpg" alt=holiday" width="100%" height="100%"/></div>
</div>
<style>
/* Initialize the counter on the parent */
.gallery1_A {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); justify-content:center; gap: 0.5vw; counter-reset: image-number; /* Creates a counter named "image-number" */}
/* Increment and display the counter on each figure */
.gallery1_A div { counter-increment: image-number; /* Increases the counter by 1 (default) */ position: relative;
display: inline-block; margin: 10px;}
.gallery1_A div:hover{scale: 1.2; transition: all 0.3s ease-in-out;}
/* Display the number using ::before or ::after */
.gallery1_A div::before { content: counter(image-number); /* Shows current counter value */ position: absolute;
top: 5px; right: 5px; background: white; padding: 2px 6px; font-weight: bold; border-radius: 3px;}
</style>
code:
<div class="gallery2">
<figure>
<img src="../images/11.jpg" alt="Description 1">
<figcaption>Caption for image 1</figcaption>
</figure>
<figure>
<img src="../images/10.jpg" alt="Description 2">
<figcaption>Caption for image 2</figcaption>
</figure>
<figure>
<img src="../images/6a.jpg" alt="Description 3">
<figcaption>Caption for image 3</figcaption>
</figure>
<figure>
<img src="../images/9a.jpg" alt="Description 3">
<figcaption>Caption for image 4</figcaption>
</figure>
</div>
<style>
/* 1. Initialize the counter on the parent container */
.gallery2{position: relative; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: figure-counter; /* You can name the counter anything you like */}
/* 2. Increment the counter for each item */
.gallery2 figure {counter-increment: figure-counter; /* Increments by 1 by default */}
.gallery2 figure img{width: 20vw; height: 20vw; gap: 0.5vw; position: relative;}
/* 3. Display the counter value using a pseudo-element */
.gallery2 figcaption::before {content: "Figure " counter(figure-counter) ": "; /* Displays "Figure 1: ", "Figure 2: ", etc. */font-weight: bold; /* Add other styling as needed (color, margin, etc.) */}
</style>
code:
<div class="gallery2_A">
<div>
<img src="../images/11.jpg" alt="Description 1">
<figcaption>Caption for image 1</figcaption>
</div>
<div>
<img src="../images/10.jpg" alt="Description 2">
<figcaption>Caption for image 2</figcaption>
</div>
<div>
<img src="../images/6a.jpg" alt="Description 3">
<figcaption>Caption for image 3</figcaption>
</div>
<div>
<img src="../images/9a.jpg" alt="Description 3">
<figcaption>Caption for image 4</figcaption>
</div>
</div>
<style>
/* 1. Initialize the counter on the parent container */
.gallery2_A{position: relative; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: figure-counter; /* You can name the counter anything you like */}
/* 2. Increment the counter for each item */
.gallery2_A div {counter-increment: figure-counter; /* Increments by 1 by default */}
.gallery2_A div img{width: 20vw; height: 20vw; gap: 0.5vw; position: relative;}
/* 3. Display the counter value using a pseudo-element */
.gallery2_A figcaption::before {content: "picture " counter(figure-counter) ": "; /* Displays "Figure 1: ", "Figure 2: ", etc. */font-weight: bold; /* Add other styling as needed (color, margin, etc.) */}
</style>
code:
<div class="gallery4">
<div class="gallery-item">
<img src="../images/1.jpg" alt="Description for image 1">
<span class="image-num"></span>
</div>
<div class="gallery-item">
<img src="../images/2.jpg" alt="Description for image 2">
<span class="image-num"></span>
</div>
<div class="gallery-item">
<img src="../images/3.jpg" alt="Description for image 3">
<span class="image-num"></span>
</div>
<div class="gallery-item">
<img src="../images/4.jpg" alt="Description for image 4">
<span class="image-num"></span>
</div>
</div>
<style>
.gallery-item {position: relative; /* Essential for positioning the number relative to the item */display: inline-block;
margin: 5px;}
.image-num {position: relative; bottom: 5px; right: 5px; background-color: black; color: white; padding: 5px 10px;
border-radius: 3px; font-size: 14px; }
.gallery4 .gallery-item img {width: 200px; /* Adjust size as needed */ height: auto; display: block; }
</style>
<script>
// Wait for the DOM to fully load
document.addEventListener('DOMContentLoaded', (event) => {
// Select all elements that will hold the image numbers
const imageNumbers = document.querySelectorAll('.image-num');
// Select all the images in the gallery
const images = document.querySelectorAll('.gallery4 .gallery-item img');
const totalImages = images.length;
// Loop through each number element and set its text content
imageNumbers.forEach((numberElement, index) => {
// index starts at 0, so add 1 for user-friendly numbering (e.g., 1 of 3)
const currentNumber = index + 1;
numberElement.textContent = `${currentNumber} of ${totalImages}`;
});
});
</script>